<template>
	<view style="padding: 10px;">
		<uv-form labelWidth="80" labelPosition="left" :model="addModel" :rules="rules" ref="addRef">
			<uv-form-item label="原密码:" prop="oldPassword" borderBottom>
				<uv-input placeholder="请输入原密码" v-model="addModel.oldPassword" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="新密码:" prop="password" borderBottom>
				<uv-input placeholder="请输入新密码" v-model="addModel.password" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="确定密码:" prop="confirmPassword" borderBottom>
				<uv-input placeholder="请输入确定密码" v-model="addModel.confirmPassword" border="none">
				</uv-input>
			</uv-form-item>
			<uv-button type="primary" text="提交" :customStyle="{marginTop: '10px',background:'#6ECEB0',border:'none'}"
				@click="commit"></uv-button>
		</uv-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		updatePasswordApi
	} from '../../api/index.js'
	const addRef = ref();
	//表单绑定对象
	const addModel = reactive({
		oldPassword: '',
		password: '',
		confirmPassword: '',
		userId:uni.getStorageSync("userId")
	})
	//表单验证规则
	const rules = reactive({
		'oldPassword': {
			type: 'string',
			required: true,
			message: '请填写原密码',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			required: true,
			message: '请填写新密码',
			trigger: ['blur', 'change']
		},
		'confirmPassword': [{
				type: 'string',
				required: true,
				message: '请填写确定密码',
				trigger: ['blur', 'change']
			},
			{
				// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
				validator: (rule, value, callback) => {
					// 此处业务逻辑省略
					// 返回true表校验通过，返回false表示不通过
					return value == addModel.password;
				},
				message: '新密码和确定密码不一致',
				trigger: ['blur', 'change']
			}
		]
	})
	const commit = async () => {
		addRef.value.validate().then(async (res) => {
			console.log(res)
			let result = await updatePasswordApi(addModel)
			if (result && result.code == 200) {
				uni.navigateBack()
			}
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}
</style>
